<!--
 * @Description: 
 * @Author: Cxy
 * @Date: 2024-03-21 22:04:46
 * @LastEditors: Cxy
 * @LastEditTime: 2024-03-21 22:39:04
 * @FilePath: \blogAdmin\play\src\views\home\codeLanguagePie.vue
-->
<script setup lang="ts">
import Echarts from '@/hooks/Echarts'

const commitRef = ref()
const { updateOption } = Echarts(commitRef, {
  title: {
    text: '项目语言占比',
    textStyle: {
      color: 'var(--color-text)',
      fontSize: 18
    }
  },
  legend: {
    top: 'bottom',
    textStyle: {
      color: 'var(--color-text)'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [10, 120],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 6
      },
      label: {
        color: 'var(--color-text)'
      },
      data: [] as { value: number; name: string }[]
    }
  ]
})

onMounted(async () => {
  await new Promise(r => setTimeout(r, 2000))
  updateOption(option => {
    option.series[0].data = [
      { name: 'Vue', value: 48.7 },
      { name: 'TypeScript', value: 26.3 },
      { name: 'JavaScript', value: 12.5 },
      { name: 'SCSS', value: 11.6 },
      { name: 'HTML', value: 5.7 },
      { name: 'Other', value: 0.2 }
    ]
    return option
  })
})
</script>
<template>
  <el-card shadow="hover">
    <div ref="commitRef" style="width: 100%; height: 100%" />
  </el-card>
</template>
